<template>
	<view class="content">
		<view class="integral">
			200
		</view>
		<view class="integral_box">
			<view class="integral_box_text">
				--&nbsp;&nbsp;已经连续签到0天&nbsp;&nbsp;--
			</view>
			<view class="integral_box_item">
				<view class="item" :class="{ item_one: index == 6 }" v-for="(item,index) in daylist" :key="index">
					<view class="top">
						{{item.day}}
					</view>
					<view class="button">
						<view class="top">
							<image v-if="!item.state" src="https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/%E7%A7%AF%E5%88%86.png"></image>
							<image v-else src="https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/houhou.png"></image>
						</view>
						<view class="button">
							30积分
						</view>
					</view>
				</view>
			</view>
			<view class="integralConfirm" @click="saveSignIn()">
				签到
			</view>
			<model-sign  v-if="signFlag" @confirmPrise="confirmPrise"></model-sign>
			
		</view>
		
	</view>
</template>

<script>
	import {
		saveSignInApi,getSignDetailApi
	} from "@/api/results.js"
	import modelSign from '@/activePages/compnents/sign_in_model.vue';
	export default {
		components: { modelSign},
		data() {
			return {
				signFlag:false,
				daylist:[
					{day:'第一天',
					state:false},
					{day:'第二天',
					state:false},
					{day:'第三天',
					state:false},
					{day:'第四天',
					state:false},
					{day:'第五天',
					state:false},
					{day:'第六天',
					state:false},
					{day:'第七天',
					state:false}
				],
				signId:0
				
			}
		},
		onLoad() {
		this.getSignDetail()
		},
		methods: {
			confirmPrise(){
				this.signFlag=false;
				this.$forceUpdate();
			},
			async getSignDetail(){
				let params = {}
				const res =await getSignDetailApi(params)
				if(res.statusCode==200){
					let sign_id=res.data.data.id;
					if(sign_id!=0){
						this.signId=sign_id
						let detailList=res.data.data.details
						
						if(detailList.length>0){
							for (var i = 0; i < detailList.length; i++) {
								let num=detailList[i].index;
								this.daylist[num].state=true
							}
						}
					}
				}
			},
			async saveSignIn(){
				let params = {
					id:this.signId
				}
				const res =await saveSignInApi(params)
				if(res.statusCode==200){
					if(res.data.code==201){
						uni.showModal({
							content:res.data.message
						})
					}else{
						this.getSignDetail();
						this.signFlag=true;
					}
				}
			}
			
		}
	}
</script>
<style>
	page {
		background-color: #F7F7F7;
		background-size: 100%;
		background-image: url('https://wanxian-test.oss-cn-shenzhen.aliyuncs.com/4453.png');

	}
</style>
<style lang="scss" scoped>
.content{
	width: 100%;
	height: 100%;
	text-align: center;
	align-items: center;
	padding-bottom: 100rpx;
	.integral{
		height: 80rpx;
		font-size: 48rpx;
		font-weight: bold;
		font-family: Georgia, 'Times New Roman', Times, serif;
		color: #bb0f09;
		line-height: 80rpx;
		position: absolute;
		top: 21%;
		left: 43%;
	}
	.integral_box{
		height: 800rpx;
		margin-top: 70%;
		.integral_box_text{
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			font-weight: bold;
			font-size: 28rpx;
		}
		.integralConfirm{
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			color: #fff;
			background-color: #ffc716;
			margin: 80rpx 100rpx auto 100rpx;
			border-radius: 50rpx;
			font-weight: bold;
			font-size: 30rpx;
		}
		.integral_box_item{
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: space-between;
			margin: auto 30rpx;
			.item{
				height: 210rpx;
				width: 23%;
				background-color: fuchsia;
				margin-bottom: 10rpx;
				margin-top: 10rpx;
				border-radius: 8rpx;
				background-color: #fdc816;
				.top{
					height: 60rpx;
					line-height: 60rpx;
					color: #fff;
				}
				.button{
					height: 140rpx;
					margin: auto 15rpx 15rpx 15rpx;
					background-color: #fff;
					border-radius: 8rpx;
					.top{
						height: 80rpx;
						justify-content: center;
						text-align: center;
						image{
							height: 60rpx;
							width: 60rpx;
							margin-top: 10rpx;
						}
					}
					.button{
						height: 60rpx;
						line-height: 60rpx;
						font-size: 30rpx;
						font-weight: 800;
						color: #e6d569;
					}
				}
			}
			.item_one{
				height: 210rpx;
				width: 46%;
				background-color: fuchsia;
				margin-bottom: 10rpx;
				margin-top: 10rpx;
				border-radius: 8rpx;
				background-color: #fdc816;
				.top{
					height: 60rpx;
					line-height: 60rpx;
					color: #fff;
				}
				.button{
					height: 140rpx;
					margin: auto 15rpx 15rpx 15rpx;
					background-color: #fff;
					border-radius: 8rpx;
					.top{
						height: 80rpx;
						justify-content: center;
						text-align: center;
						image{
							height: 60rpx;
							width: 60rpx;
							margin-top: 10rpx;
						}
					}
					.button{
						height: 60rpx;
						line-height: 60rpx;
						font-size: 30rpx;
						font-weight: 800;
						color: #e6d569;
					}
				}
			}
		}
	}
	
}
</style>
